<template>
  <div class="view-main">
      <div class="view-box">
        <div class="view-main-title">
          <span class="view-main-title-config">基本参数选择</span>
          <div
            class="view-main-title-address el-icon-folder-opened"
            @click="addressSelectPlanFn()"
          >
            选址方案
          </div>
        </div>
        <el-form ref="form" :model="sizeForm" label-width="86px" size="mini">
          <el-form-item label="行政区域：">
            <el-select
              v-model="sizeForm.originArea"
              placeholder="请选择行政区域"
            >
              <el-option label="Zone one" value="shanghai"> </el-option>
              <el-option label="Zone two" value="beijing"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="项目名称：">
            <el-input v-model="sizeForm.projectName"> </el-input>
          </el-form-item>
          <el-form-item label="建设单位：">
            <el-input v-model="sizeForm.constructionUnit"> </el-input>
          </el-form-item>
          <el-form-item label="建设单位：">
            <el-col :span="9">
              <el-input v-model="sizeForm.siteAreaMin"> </el-input>
            </el-col>
            <el-col class="line" :span="4">--</el-col>
            <el-col :span="9">
              <el-input v-model="sizeForm.siteAreaMax"> </el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="用地类型：">
            <el-select
              v-model="sizeForm.siteTypeMax"
              placeholder="请选择用地类型"
            >
              <el-option label="Zone one" value="shanghai"> </el-option>
              <el-option label="Zone two" value="beijing"> </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="view-main-title">
          <span class="view-main-title-config">禁止压盖</span>
        </div>
        <div class="view-main-checkBox">
          <el-checkbox-group v-model="sizeForm.checkList" size="medium">
            <el-checkbox
              v-for="item in checkList"
              :key="item.id"
              :label="item.label"
              >{{ item.label }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
        <div class="view-main-title">
          <span class="view-main-title-config">选址影响因素配置</span>
          <div class="view-main-title-address" @click="addressSelectReasonFn()">
            配置
          </div>
        </div>
        <el-table :data="tableData" style="width: 100%" empty-text="暂无数据">
          <el-table-column prop="name" label="因子名称" />
          <el-table-column prop="tiaojian" label="条件" />
          <el-table-column prop="value" label="约束值" />
        </el-table>
      </div>
      <div class="view-main-button">
        <div class="view-main-button-buttonBox">
          <el-button type="primary" size="small">开始选址</el-button>
          <el-button type="info" size="small" icon="el-icon-refresh-right">
            重置分析</el-button
          >
        </div>
        <p class="view-main-button-savePlan">保存方案</p>
      </div>
      <!--  <FoldListData @handle="addFeatureLayer" /> -->

    <AddressSelectPlan :visible="visible" @close="visible = false" />
    <AddressSelectReason :visible="visible1" @close="visible1 = false" />
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, PropType, reactive, ref } from "vue";
import LeftPop from "@/components/LeftPop/LeftPop.vue";
import AddressSelectPlan from "./components/addressSelectPlan.vue";
import AddressSelectReason from "./components/addressSelectReason.vue";

interface IArcgisConfig {
  basemap: object;
}

export default defineComponent({
  props: {
    basemap: {
      type: Object as PropType<null | "">,
    },
  },
  data() {
    return {
      title: "",
    };
  },
  components: {
    LeftPop,
    AddressSelectPlan,
    AddressSelectReason,
  },
  setup(props, ctx) {
    const sizeForm = reactive({
      originArea: "", //行政区域
      projectName: "", //项目名称
      constructionUnit: "", //建设单位
      siteAreaMin: "", //用地面积
      siteAreaMax: "", //用地面积
      siteTypeMax: "", //用地类型
      checkList: ["审批备案"],
    });
    interface CheckType {
      id: number;
      label: string;
    }
    const checkList: CheckType[] = [
      { id: 1, label: "审批备案" },
      { id: 2, label: "基本农田" },
      { id: 3, label: "生态红线" },
      { id: 4, label: "其他图层" },
    ];
    const tableData = reactive([
    ]);
    let visible = ref(false);
    let visible1 = ref(false);
    //选址方案
    const addressSelectPlanFn = () => {
      visible.value = true;
    };
    //选址因子
    const addressSelectReasonFn = () => {
      visible1.value = true;
    };
    // onMounted(() => {
    //   init();
    // });

    return {
      // addFeatureLayer,
      checkList,
      sizeForm,
      tableData,
      visible,
      visible1,
      addressSelectPlanFn,
      addressSelectReasonFn,
    };
  },
});
</script>

<style lang="less" scoped>
.view-main {
  width: 100%;
  height: 100%;
  background: white;
  position: relative;
  .view-box {
    min-height: calc(100vh - 150px);
  }
  .el-form {
    padding-left: 10px;
    .el-form-item {
      width: 90%;
      .el-select {
        width: 100%;
      }
    }
  }
  &-title {
    width: 98%;
    margin: 5px;
    height: 24px;
    background-color: #eee;
    padding: 2px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &-config {
      padding-left: 10px;
      color: #333;
      font-size: 14px;
      font-weight: 500;
      border-left: 3px solid #4ca2db;
    }
    &-address {
      color: #1299f5;
      font-size: 12px;
      padding-right: 10px;
      cursor: pointer;
    }
  }
  &-checkBox {
    padding-left: 10px;
  }
  &-button {
    width: 100%;
    flex-direction: 1;
    border-top: 1px solid #eee;
    padding: 10px;
    box-sizing: border-box;
    // position: fixed;
    // bottom: 10px;
    &-buttonBox {
      width: 52%;
      margin: 0 auto;
      text-align: center;
    }
    &-savePlan {
      font-size: 12px;
      color: rgb(64, 158, 255);
      text-align: center;
      margin-bottom: 0;
    }
    // padding-top: 100px;
    // display: flex;
    // justify-content: center;
  }
}

#viewDiv {
  position: absolute;
  height: 100%;
  width: 100%;
}
#infoDiv {
  background-color: white;
  padding: 10px;
  max-height: 375px;
  overflow: auto;
}
</style>
